<template>
    <div class="box">
        <div class="left">
            
        </div>
        <div class="right">
              <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="px" label-position="left">
  <el-row type="flex" justify="start" align="middle">
    <el-col :span="8">
      <el-form-item label-width="0" prop="field112">
        <el-select v-model="formData.field112" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in field112Options" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-form-item label-width="0" prop="value">
      <el-input v-model="formData.value" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
    </el-form-item>
    <el-col :span="2">
      <el-form-item label="" prop="field117">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini"></el-button>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row type="flex" justify="start" align="middle">
    <el-col :span="7">
      <el-form-item label-width="0" prop="boolType">
        <el-select v-model="formData.boolType" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in boolTypeOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="9">
      <el-form-item label-width="0" prop="field106">
        <el-select v-model="formData.field106" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in field106Options" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-form-item label-width="0" prop="field111">
      <el-input v-model="formData.field111" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
      </el-input>
    </el-form-item>
    <el-col :span="2">
      <el-form-item label="" prop="field120">
        <el-button type="primary" icon="el-icon-remove-outline" size="mini"></el-button>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item size="large">
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>


        </div>
           
        
    </div>
</template>
<script>
  import {toRetrieval} from "@/api/retrieval"
  export default {
    data() {
      return {
          formData: {
        field112: undefined,
        value: undefined,
        field117: undefined,
        boolType: 1,
        field106: undefined,
        field111: "",
        field120: undefined,
      },
      rules: {
        field112: [],
        value: [],
        boolType: [{
          required: true,
          message: '请选择下拉选择',
          trigger: 'change'
        }],
        field106: [],
        field111: [{
          pattern: /[abce-z]/g,
          message: '错误',
          trigger: 'blur'
        }],
      },
      field112Options: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      boolTypeOptions: [{
        "label": "AND",
        "value": 1
      }, {
        "label": "OR",
        "value": 2
      }, {
        "label": "NOT",
        "value": 3
      }],
      field106Options: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
       
      }
    },
    methods: {
        submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    }
  }
</script>
<style lang="scss" scoped>
   .box{
      width: 100%;
      display: flex;
    //   background-color: #c1c1c1;
    //   opacity: 0.3;
      flex-direction: row;
      .left{
          width: 300px;
          height: 800px;
          background-color: aquamarine;
      }
      .right{
          flex: 1;
          height: 200px;
          background-color:#ffffff;
      }
      
   }


</style>